<template>
  <div class="b-b-[#ededed] b-b-solid b-b-1 w-full">
    <div class=" w-full">
      <nut-searchbar class="w-full" v-model="countryName" placeholder="请输入目的地">
        <template #leftin>
          <Search2 />
        </template>
      </nut-searchbar>
    </div>
  </div>
  <div v-if="true && search_country_name" class="flex px-25 mt-10">
    <div class="rounded-12 border border-#eee border-solid country px-15 pt-6 pb-8  text-center bg-[#f6f7f9] mb-10" @click="toVisaList(search_country_name)">
      <p>{{ search_country_name }}</p>
    </div>
  </div>
  <div class="px-15">
    <hotCountryCom :hotCountryList="hotCountryList" />
  </div>
  <div class="flex mt-15" v-if="false">
    <div class="h-screen bg-[#f5f5f5]">
      <nut-tabs v-model="selectedState" color="#3d8ffd" swipeable auto-height direction="vertical">
        <nut-tab-pane title="热门" pane-key="-1">
          <countryLists :countryList="hotCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" :isAll="false" />
        </nut-tab-pane>
        <nut-tab-pane title="亚洲" pane-key="0">
          <countryLists :countryList="asianCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
        </nut-tab-pane>
        <nut-tab-pane title="欧洲" pane-key="1">
          <countryLists :countryList="europeCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
        </nut-tab-pane>
        <nut-tab-pane title="美洲" pane-key="2">
          <countryLists :countryList="americaCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
        </nut-tab-pane>
        <nut-tab-pane title="大洋洲" pane-key="3">
          <countryLists :countryList="oceaniaCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
        </nut-tab-pane>
        <nut-tab-pane title="非洲" pane-key="4">
          <countryLists :countryList="africaCountry" :selectedState="selectedState" @goSelectVisa="goSelectVisa" />
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import countryLists from './components/countryList.vue'
import hotCountryCom from './components/hotCountry.vue'
import { useVisaStore } from '@/store/modules/visa/index.js'
import { useRoute, useRouter } from 'vue-router'
import { Notice, Search2 } from '@nutui/icons-vue';



const route = useRoute()
const router = useRouter()
let countryList = useVisaStore().countryList
let countrySetList = []
let selectedState = ref(-1)
let countryName = ref('')
let value = ref(0)
let hotCountry = ref([])
let asianCountry = ref([])
let europeCountry = ref([])
let americaCountry = ref([])
let oceaniaCountry = ref([])
let africaCountry = ref([])
let hotCountryList = ref([])
let country_set = useVisaStore().countryList
const getVisaCountryListFun = async () => {
  if (!country_set || !country_set.length) {
    country_set = window.sessionStorage.getItem('setCountryList') && JSON.parse(window.sessionStorage.getItem('setCountryList'))
    hotCountryList.value = country_set.slice(0, 10)
  } else {
    hotCountryList.value = country_set.slice(0, 10)
  }
  if (country_set && country_set.length) {
    hotCountry.value = country_set.slice(0, 10)
    country_set.forEach((value, index, array) => {
      if (value.continent_id === 0) {
        asianCountry.value.push(value)
      } else if (value.continent_id === 1) {
        europeCountry.value.push(value)
      } else if (value.continent_id === 2) {
        americaCountry.value.push(value)
      } else if (value.continent_id === 3) {
        oceaniaCountry.value.push(value)
      } else if (value.continent_id === 4) {
        africaCountry.value.push(value)
      }
    })
  }
}

let search_country_name = ref('')
watch(countryName, (newL) => {
  let name = ''
  country_set.forEach(item => {
    if (item.country_name === newL) {
      name = item.country_name
    }
  })
  search_country_name.value = name
})
const toVisaList = async (name) => {
  router.push({ path: '/visaList', query: { country_name: name, addr_json_url: route.query.addr_json_url } })
}
const goSelectVisa = async (item) => {
  router.push({ path: '/visaList', query: { country_name: item.country_name, addr_json_url: route.query.addr_json_url } })
}
getVisaCountryListFun()
</script>

<style lang="scss" scoped>
</style>